<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="col-2">
        <div class="sticky" :style="'top: ' + topVal">
          <q-card flat>
            <q-card-section class="q-pa-none">
              <q-list bordered>
                <template v-for="item in categoryList" :key="item.id">
                  <q-item :to="'/category/' + item.id" clickable v-ripple>
                    <q-item-section avatar>
                      <q-icon :name="item.iconName" />
                    </q-item-section>
                    <q-item-section>{{ item.name }}</q-item-section>
                  </q-item>
                  <q-separator />
                </template>
              </q-list>
            </q-card-section>
          </q-card>
        </div>
      </div>
      <div class="column col q-px-sm">
        <q-card flat v-show="props.cId">
          <q-tabs
            align="left"
            dense
            v-model="pageParam.order"
            @update:model-value="
              (val) => {
                pageParam.order = val
                f5()
              }
            "
            active-color="primary"
          >
            <q-tab name="read_num" label="最多阅读" />
            <q-tab name="edit_time" label="最近更新" />
          </q-tabs>
          <div class="absolute-right row items-center">
            <q-btn flat icon="refresh" @click="f5()">
              <q-tooltip> 刷新 </q-tooltip>
            </q-btn>
          </div>
        </q-card>

        <q-card v-for="item in rows" :key="item.id" title="查看博客" class="q-mt-sm" flat>
          <ItemArticle :item="item"></ItemArticle>
        </q-card>
        <div class="q-mt-sm" v-show="loading">
          <SkeletonArticle></SkeletonArticle>
        </div>

        <q-card v-if="!loading && props.cId && rows.length == 0" flat class="q-mt-sm">
          <q-card-section class="text-center dark:bg-neutral-700">
            <div
              class="h-xs w-full bg-contain bg-center bg-no-repeat"
              style="background-image: url('images/no-data.svg')"
            ></div>

            <div class="text-base">此分类下暂无文章~~</div>
          </q-card-section>
        </q-card>
        <div
          class="q-pa-sm full-width row flex-center"
          v-show="!loading && pageParam.totalPage > 1"
        >
          <div>共 {{ pageParam.recordCount }} 篇文章</div>
          <q-pagination
            @update:model-value="
              (value) => {
                pageParam.pageNum = value
                f5()
              }
            "
            v-model="pageParam.pageNum"
            :max="pageParam.totalPage"
            :max-pages="6"
            direction-links
          />
        </div>
        <q-space />
      </div>
      <div class="col-3 gt-xs">
        <div><HotTagCard></HotTagCard></div>
        <div class="sticky" :style="'top: ' + webStore.topVal">
          <div class="q-mt-sm"><HotArticleCard></HotArticleCard></div>
          <div class="q-mt-sm"><HotTopicCard></HotTopicCard></div>
        </div>
      </div>
    </div>
    <SuspensionBtn></SuspensionBtn>
  </q-page>
</template>

<script setup lang="ts">
import HotArticleCard from 'src/components/HotArticleCard.vue'
import HotTopicCard from 'src/components/HotTopicCard.vue'
import ItemArticle from 'src/components/ItemArticle.vue'
import HotTagCard from 'src/components/HotTagCard.vue'
import SuspensionBtn from 'src/components/SuspensionBtn.vue'
import { storeToRefs } from 'pinia'
import { useWebStore } from 'src/stores/webStore'
import { onMounted, ref } from 'vue'
import type { ApiType } from 'src/service/api'
import { mainArticleList } from 'src/service/api'
import { watch } from 'vue'
import useBoolean from 'src/use/useBoolean'
import SkeletonArticle from 'src/components/SkeletonArticle.vue'

const webStore = useWebStore()
const { categoryList, topVal } = storeToRefs(webStore)

const props = withDefaults(
  defineProps<{
    cId: string
  }>(),
  { cId: '' },
)

type rowsType = ApiType<typeof mainArticleList>['Return']['rows'][0]

const rows = ref<Array<rowsType>>([])

const pageParam = ref({
  pageNum: 1,
  pageSize: 20,
  totalPage: 0,
  recordCount: 0,
  order: 'read_num',
  categoryId: props.cId || '-1',
})

watch(
  () => props.cId,
  (newval) => {
    pageParam.value.categoryId = newval || '-1'
    f5()
  },
)

const { bool: loading, setTrue: startLoad, setFalse: stopLoad } = useBoolean()

onMounted(() => {
  f5()
})

const f5 = () => {
  rows.value = []
  startLoad()
  mainArticleList(pageParam.value).then(({ data, error }) => {
    stopLoad()
    if (!error) {
      pageParam.value.totalPage = data.totalPage
      pageParam.value.recordCount = data.recordCount
      rows.value = data.rows
    }
  })
}
</script>

<style scoped></style>
